<template>
  <div class="ai-images-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>AI模型管理</el-breadcrumb-item>
            <el-breadcrumb-item>AI生成图片库</el-breadcrumb-item>
          </el-breadcrumb>
          <h1 class="page-title">
            <svg-icon icon-class="image" style="margin-right: 10px; color: #1EB7E6;" />
            AI生成图片库
          </h1>
          <p class="page-description">
            查看和管理当前项目所有AI生成的图片，支持预览、下载和统计功能
          </p>
        </div>
        <div class="header-right">
          <!-- 帮助按钮 -->
          <el-button
            type="info"
            size="mini"
            icon="el-icon-question"
            circle
            title="查看帮助"
            @click="showHelp"
          />
        </div>
      </div>
    </div>

    <!-- 图片画廊组件 -->
    <div class="gallery-container">
      <ai-generated-image-gallery />
    </div>

    <!-- 帮助对话框 -->
    <el-dialog
      :visible.sync="helpDialog.visible"
      title="使用帮助"
      width="60%"
      top="10vh"
    >
      <div class="help-content">
        <el-card shadow="never" class="help-section">
          <div slot="header" class="help-section-title">
            <svg-icon icon-class="image" style="margin-right: 8px;" />
            功能说明
          </div>
          <ul class="help-list">
            <li><strong>图片浏览：</strong>支持网格和列表两种视图模式</li>
            <li><strong>图片预览：</strong>点击图片可放大预览，查看详细信息</li>
            <li><strong>批量下载：</strong>支持单张图片下载到本地</li>
            <li><strong>分页显示：</strong>可自定义每页显示数量（12/24/48/96）</li>
            <li><strong>统计信息：</strong>管理员可查看全局图片统计（需要管理员权限）</li>
            <li><strong>批量清理：</strong>管理员可删除项目所有图片（需要管理员权限）</li>
          </ul>
        </el-card>

        <el-card shadow="never" class="help-section">
          <div slot="header" class="help-section-title">
            <svg-icon icon-class="guide" style="margin-right: 8px;" />
            操作指南
          </div>
          <div class="help-steps">
            <el-steps direction="vertical" :active="3">
              <el-step title="选择视图模式" description="在顶部工具栏选择网格或列表视图" />
              <el-step title="浏览图片" description="滚动页面查看所有AI生成的图片" />
              <el-step title="预览详情" description="点击图片查看大图和详细信息" />
              <el-step title="下载保存" description="在预览或列表中点击下载按钮保存到本地" />
            </el-steps>
          </div>
        </el-card>

        <el-card shadow="never" class="help-section">
          <div slot="header" class="help-section-title">
            <svg-icon icon-class="warning" style="margin-right: 8px;" />
            注意事项
          </div>
          <ul class="help-list">
            <li>图片按创建时间降序排列，最新生成的图片在前面</li>
            <li>图片URL可直接复制用于外部访问</li>
            <li>删除操作不可恢复，请谨慎操作</li>
            <li>大图片预览可能需要一定加载时间</li>
            <li>建议定期清理不需要的图片以节省存储空间</li>
          </ul>
        </el-card>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="helpDialog.visible = false">我知道了</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AiGeneratedImageGallery from '@/components/AiGeneratedImageGallery'

export default {
  name: 'AiGeneratedImagesPage',
  components: {
    AiGeneratedImageGallery
  },

  data() {
    return {
      helpDialog: {
        visible: false
      }
    }
  },

  methods: {
    // 显示帮助
    showHelp() {
      this.helpDialog.visible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.ai-images-page {
  min-height: 100vh;
  background: #f5f5f5;

  .page-header {
    background: white;
    border-bottom: 1px solid #e4e7ed;
    padding: 20px 30px;
    margin-bottom: 0;

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      max-width: 1200px;
      margin: 0 auto;

      .header-left {
        .page-title {
          font-size: 24px;
          color: #303133;
          margin: 10px 0;
          display: flex;
          align-items: center;
        }

        .page-description {
          color: #606266;
          margin: 0;
          line-height: 1.5;
        }
      }

      .header-right {
        margin-top: 10px;
      }
    }
  }

  .gallery-container {
    max-width: 1200px;
    margin: 0 auto;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-top: 20px;
    margin-bottom: 30px;
  }
}

// 帮助对话框样式
.help-content {
  .help-section {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }

    .help-section-title {
      display: flex;
      align-items: center;
      font-weight: bold;
      color: #303133;
    }

    .help-list {
      margin: 0;
      padding-left: 20px;

      li {
        margin-bottom: 8px;
        color: #606266;
        line-height: 1.5;

        strong {
          color: #303133;
        }
      }
    }

    .help-steps {
      ::v-deep .el-steps {
        .el-step__title {
          font-weight: bold;
        }
      }
    }
  }
}

::v-deep .el-breadcrumb {
  margin-bottom: 10px;

  .el-breadcrumb__inner {
    color: #909399;

    &.is-link {
      color: #1EB7E6;
    }
  }
}
</style>
